<!--
 * @Author: 陆成杰
 * @Date: 2022-06-24 08:39:59
 * @LastEditTime: 2022-06-27 11:11:59
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/login/Login.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->

<template>
  <div class="login">
    <div class="left">
      <img src="../../assets/loginnestbg.png" />
      <div class="copyright">
        Copyright © 2022 京东方艺云科技有限公司 版权所有
      </div>
    </div>
    <div class="right">
      <div class="form">
        <h3>Hello!</h3>
        <p>欢迎登录<span>BOE商用画屏发布系统</span></p>
        <div class="table">
          <div
            @click="changColor1"
            :class="show1 ? 'table-more table-acc' : 'table-more'"
          >
            <input type="text" v-model="acc" placeholder="请输入账户名" />
          </div>
          <div class="msg" v-if="showacc">请输入账户名！</div>
        </div>
        <div class="table">
          <div
            @click="changColor2"
            :class="show2 ? 'table-more table-pwd' : 'table-more'"
          >
            <input
              :type="pwdFlag ? 'password' : 'text'"
              v-model="pwd"
              placeholder="请输入密码"
            />
            <span
              ><img :src="pwdFlag ? textIcon : pwdIcon" @click="changPwd"
            /></span>
          </div>
          <div class="msg" v-if="showpwd">请输入密码！</div>
        </div>
        <button @click="login">登录</button>
      </div>
      <div class="tell">客服热线：400-668-1000</div>
    </div>
  </div>
</template>

<script>
import { postLogin } from "../../axios/login";
export default {
  data: function () {
    return {
      pwdFlag: false,
      textIcon: "../../assets/closeeye.png",
      pwdIcon: "../../assets/openeye.png",
      showacc: false,
      showpwd: false,
      show1: false,
      show2: false,
      acc: "",
      pwd: "",
    };
  },
  methods: {
    changColor1: function () {
      this.show1 = true;
    },
    changColor2: function () {
      this.show2 = true;
    },
    login() {
      if (this.acc == "") {
        this.showacc = true;
      } else {
        this.showacc = false;
      }
      if (this.pwd == "") {
        this.showpwd = true;
      } else {
        this.showpwd = false;
      }
      postLogin(this.acc, this.pwd).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // console.log("登录成功");
          const token = 'Bearer ' + res.token
          console.log(token)
          window.localStorage.setItem('token', token)
          this.$router.replace("/home");
        }
      });
    },
    changPwd() {
      this.pwdFlag = !this.pwdFlag;
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 55%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
    .copyright {
      font-size: 15px;
      bottom: 2rem;
      color: #5e6875;
      position: relative;
      text-align: center;
      width: 100%;
    }
  }
  .right {
    width: 45%;
    .form {
      width: 70%;
      height: 72%;
      // background: #000;
      margin-left: 150px;
      margin-top: 25%;
      h3 {
        color: #16171c;
        font-size: 60px;
        margin-bottom: 20px;
        font-weight: 550;
      }
      p {
        font-weight: 500;
        font-size: 18px;
        letter-spacing: 2px;
        color: #999;
        margin-bottom: 40px;
        span {
          color: #1890ff;
        }
      }
      .table {
        width: 80%;
        height: 90px;
        // background: #000;
        margin-block: 1px;
        .table-more {
          width: 100%;
          height: 55px;
          border-radius: 40px;
          background: rgb(242, 243, 245);
          display: flex;
          border: 2px solid rgb(242, 243, 245);
          input {
            width: 80%;
            background: rgb(242, 243, 245);
            font-size: 17px;
            border: 0px;
            margin-left: 10px;
            border-radius: 40px;
            outline: none;
          }
          span {
            width: 8%;
            height: 10px;
            img {
              width: 100%;
              margin-top: 12px;
              margin-left: 10px;
            }
          }
        }
        .table-acc {
          border: 2px solid rgb(250, 216, 200);
        }
        .table-pwd {
          border: 2px solid rgb(204, 230, 255);
        }
        .msg {
          color: #ff4d4f;
          margin-left: 10px;
          margin-top: 5px;
        }
      }
      button {
        width: 50%;
        border-radius: 40px;
        height: 50px;
        margin-top: 50px;
        background-color: #1890ff;
        color: white;
        border: 0px;
        font-size: 17px;
      }
    }
    .tell {
      font-size: 15px;
      bottom: 0;
      color: #5e6875;
      position: relative;
      text-align: center;
      width: 100%;
    }
  }
}
</style>
